<template>
  <div>
    <el-row style="padding:5px">
      <el-col :span="24">
        <div>
          <table class="userInfoEditTable" style="width:100%;border-collapse:collapse;background-color:white;" cellspacing="0">
            <tr>
              <td colspan="21" style="color:white;background:black">
                {{new Date().getMonth() + 1 + "月份各区域网格事件发生次数统计"}}
              </td>
            </tr>
            <tr>
              <td>地区/类型</td>
              <td v-for="(v,index) in area2" :key="index">{{v}}</td>
              <td>合计</td>
            </tr>
            <tr class="mycolor">
              <td>一般事件</td>
              <td v-for="(v,i) in common" :key="i">{{v}}</td>
              <td>{{getSum(common)}}</td>
            </tr>
            <tr>
              <td>重大事件</td>
              <td v-for="(v,i) in great" :key="i">{{v}}</td>
              <td>
                {{getSum(great)}}
              </td>
            </tr>
            <tr class="mycolor">
              <td>小计</td>
              <td v-for="(v,i) in common" :key="i">{{great[i]+common[i]}}</td>
              <td>
                {{getSum(common)+getSum(great)}}
              </td>
            </tr>
          </table>
        </div>
      </el-col>
      <el-col :span="24">
        <div>
          <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
            <tr>
              <td colspan="21" style="color:white;background:black">
                {{new Date().getMonth() + 1 + "月份各区域治安事件处理情况统计"}}
              </td>
            </tr>
            <tr>
              <td>地区/类型</td>
              <td v-for="(v,index) in area3" :key="index">{{v}}</td>
              <td>合计</td>
            </tr>
            <tr class="mycolor">
              <td>一般事件</td>
              <td v-for="(v,i) in common1" :key="i">{{v}}</td>
              <td>{{getSum(common1)}}</td>
            </tr>
            <tr>
              <td>重大事件</td>
              <td v-for="(v,i) in great1" :key="i">{{v}}</td>
              <td>
                {{getSum(great1)}}
              </td>
            </tr>
            <tr class="mycolor">
              <td>小计</td>
              <td v-for="(v,i) in common1" :key="i">{{great1[i]+common1[i]}}</td>
              <td>
                {{getSum(common1)+getSum(great1)}}
              </td>
            </tr>
          </table>
        </div>
      </el-col>
      <el-col :span="24">
        <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
          <tr>
            <td colspan="21" style="color:white;background:black">
              {{new Date().getMonth() + 1 + "月份各区域矛盾纠纷事件处理情况统计"}}
            </td>
          </tr>
          <tr>
            <td>地区/类型</td>
            <td v-for="(v,index) in area4" :key="index">{{v}}</td>
            <td>合计</td>
          </tr>
          <tr class="mycolor">
            <td>已办事项</td>
            <td v-for="(v,i) in hadDone" :key="i">{{v}}</td>
            <td>{{getSum(hadDone)}}</td>
          </tr>
          <tr>
            <td>待办事项</td>
            <td v-for="(v,i) in needDoList" :key="i">{{v}}</td>
            <td>
              {{getSum(needDoList)}}
            </td>
          </tr>
          <tr class="mycolor">
            <td>小计</td>
            <td v-for="(v,i) in hadDone" :key="i">{{hadDone[i]+needDoList[i]}}</td>
            <td>
              {{getSum(hadDone)+getSum(needDoList)}}
            </td>
          </tr>
        </table>
      </el-col>
      <el-col :span="24">
        <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
          <tr>
            <td colspan="21" style="color:white;background:black">
              {{new Date().getMonth() + 1 + "月份各区域交通事故处理情况统计"}}
            </td>
          </tr>
          <tr>
            <td>地区</td>
            <td v-for="(v,index) in a" :key="index">{{v}}</td>
            <td>合计</td>
          </tr>
          <tr class="mycolor">
            <td>小计</td>
            <td v-for="(v,i) in b" :key="i">{{v}}</td>
            <td>{{ getSum(b)}}</td>
          </tr>
        </table>
      </el-col>
      <el-col :span="12">
        <div align="center" id="histogram2" style="width:100%; height:450px;margin-top:20px"></div>
      </el-col>
      <el-col :span="12">
        <div id="stackchart" style="width:100%;height:450px;margin-top:20px"></div>
      </el-col>
      <el-col :span="12">
        <div id="stackchart1" style="width:100%;height:450px;margin-top:20px"></div>
      </el-col>
      <el-col :span="12">
        <div id="stackchart2" style="width:100%;height:450px;margin-top:20px" />
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="visible">
      <el-row>
        <el-col v-if="current==1" :span="24">
          <el-table :data="List5" border>
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column v-for="(v,k,i) in prop4" :key="i" :label="label1[i]" align="center">
              <template scope="scope">
                <span v-if="k==='sex'">
                  {{scope.row[k]==1?'男':'女'}}
                </span>
                <span v-else-if="k=='eventKind'">
                  {{getKind(scope.row[k])}}
                </span>
                <span v-else>
                  {{scope.row[k]}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template scope="scope">
                <el-button type="text" @click="netGridEventInfo(scope.row.eventID)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo5" @current-change="handleCurrentChange5">
          </el-pagination>
        </el-col>
        <el-col v-if="current==2" :span="24">
          <el-table :data="List3" border>
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column v-for="(v,k,i) in prop2" :key="i" :label="label1[i]" align="center">
              <template scope="scope">
                <span v-if="k==='sex'">
                  {{scope.row[k]==1?'男':'女'}}
                </span>
                <span v-else-if="k=='trafficAccidentKind'">
                  {{scope.row[k]==1?'一般事件':'重大事件'}}
                </span>
                <span v-else>
                  {{scope.row[k]}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template scope="scope">
                <el-button type="text" @click="trafficInfo(scope.row.trafficAccidentID)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo3" @current-change="handleCurrentChange3">
          </el-pagination>
        </el-col>
        <el-col v-if="current==3" :span="24">
          <el-table border :data="List2">
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column v-for="(v,k,i) in prop1" :key="i" :label="label1[i]" prop="" align="center">
              <template scope="scope">
                <span v-if="k==='sex'">
                  {{scope.row[k]==1?'男':'女'}}
                </span>
                <span v-else-if="k=='ssEventKind'">
                  {{scope.row[k]==1?'一般事件':'重大事件'}}
                </span>
                <span v-else>
                  {{scope.row[k]}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template scope="scope">
                <el-button type="text" @click="socialInfo(scope.row.ssEventID)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo2" @current-change="handleCurrentChange2">
          </el-pagination>
        </el-col>
        <el-col v-if="current==4" :span="24">
          <el-table :data="List1" border>
            <el-table-column type="index" width="80"></el-table-column>
            <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
            <el-table-column prop="eventPlace" label="发生地点" align="center"></el-table-column>
            <el-table-column prop="evenScaleTypeName" label="事件规模" align="center"></el-table-column>
            <el-table-column prop="eventTypeName" label="事件类型" align="center"></el-table-column>
            <el-table-column prop="eventDate" label="发生时间" align="center"></el-table-column>
            <el-table-column prop="eventStatusName" label="事件处理状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template scope="scope">
                <el-button type="text" @click="watchDispute(scope.row.disputeEventID)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo1" @current-change="handleCurrentChange1">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog top="5%" title="查看详情" :visible.sync="visible1">
      <el-row>
        <el-col v-if="current==1" :span="24">
          <infoe :id="id" />
        </el-col>
        <el-col v-if="current==2" :span="24">
          <infoc :id="id" />
        </el-col>
        <el-col v-if="current==3" :span="24">
          <infob :id="id" />
        </el-col>
        <el-col v-if="current==4" :span="24">
          <infoa :id="id" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/netGridManage";
import * as api2 from "@/api/securityManage";
import * as api3 from "@/api/contradictionManage/index";
import * as api4 from "@/api/trafficManage";
import * as api5 from "../../api/netGridManage";

import infoa from "../contradictionManage/checkDetail";
import infob from "../publicSecurityManage/eventInfo";
import infoc from "../trafficManage/trafficEventInfo";
import infoe from "../netManage/netEventInfo";

export default {
  components: {
    infoa: infoa,
    infob: infob,
    infoc: infoc,
    infoe: infoe
  },
  data() {
    return {
      id: 0,
      current: 1,
      title: "",
      visible: false,
      visible1: false,
      activeName: "first",
      area: [],
      area2: [],
      area3: [],
      area4: [],
      common: [],
      great: [],
      common1: [],
      great1: [],
      areaData: [
        { netGridID: 1, netGridName: "南巷村" },
        { netGridID: 2, netGridName: "新塘村" },
        { netGridID: 3, netGridName: "九华村" },
        { netGridID: 4, netGridName: "后塘村" },
        { netGridID: 5, netGridName: "大卓村" },
        { netGridID: 6, netGridName: "黄梅村" },
        { netGridID: 7, netGridName: "下荫村" },
        { netGridID: 8, netGridName: "莲塘村" },
        { netGridID: 9, netGridName: "赤岗社区" },
        { netGridID: 10, netGridName: "石狮村" },
        { netGridID: 11, netGridName: "杨塘岗社区" },
        { netGridID: 12, netGridName: "姚徐村" },
        { netGridID: 13, netGridName: "河桥村" },
        { netGridID: 14, netGridName: "后莘村" },
        { netGridID: 15, netGridName: "杜家山村" },
        { netGridID: 16, netGridName: "三里井社区" },
        { netGridID: 17, netGridName: "西庙社区" },
        { netGridID: 18, netGridName: "三台阁社区" },
        { netGridID: 19, netGridName: "寨里社区" }
      ],
      hadDone: [],
      needDoList: [],
      a: [],
      b: [],
      totalInfo1: 0,
      totalInfo2: 0,
      totalInfo3: 0,
      totalInfo4: 0,
      totalInfo5: 0,
      prop1: {
        ssEventName: "",
        ssEventKind: "", //               '事件性质，如1=一般事件；2=重大事件；等',
        ssEventTypeName: "", //          '事件类型，如杀人、放火、抢劫等',
        ssEventStatusTypeName: "", //     '当前事件处理的最新状态',
        ssEventStartDateTime: "",
        netGridName: "" //所属网格
      },
      label1: [
        "事件名称",
        "事件性质",
        "事件类型",
        "事件处理状态",
        "发生日期",
        "所属网格"
      ],
      prop2: {
        trafficAccidentName: "", //事故名称
        trafficAccidentKindName: "", //  int comment '交通事故性质，编码待定',
        trafficAccidentTypeName: "", //          '事件类型，如杀人、放火、抢劫等',
        trafficAccidentStatusTypeName: "", // char(2) comment '当前交通事故处理的最新状态',
        trafficAccidentStartDateTime: "",
        netGridName: "" //所属网格
      },
      prop4: {
        // eventID: "", //bigint not null auto_increment,
        eventName: "", //'事件名称',
        eventKind: "",
        eventTypeName: "", //'事件类型，如杀人、放火、抢劫等',
        eventStatusTypeName: "",
        eventStartDateTime: "",
        netGridName: ""
      },
      List1: [],
      query1: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      query2: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List2: [],
      query3: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List3: [],
      query4: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List4: [],
      query5: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        isDC: 0
      },
      List5: [],
      timer:null
    };
  },
  methods: {
    watchDispute(id) {
      this.id = id;
      this.current = 4;
      this.visible1 = true;
    },
    trafficInfo(id) {
      this.id = id;
      this.current = 2;
      this.visible1 = true;
    },
    socialInfo(id) {
      this.id = id;
      this.current = 3;
      this.visible1 = true;
    },
    netGridEventInfo(id) {
      this.id = id;
      this.current = 1;
      this.visible1 = true;
    },
    getKind(id) {
      switch (id) {
        case 1:
          return "一般事件";
        case 2:
          return "重大事件";
        case 3:
          return "简单事件";
      }
    },
    getDisputeEventForNetGrid() {
      api5.getDisputeEventForNetGrid(this.query1).then(res => {
        this.List1 = res.data.disputeEvents;
        this.totalInfo1 = res.data.page.totalCount;
      });
    },
    getSSEventForNetGrid() {
      api5.getSSEventForNetGrid(this.query2).then(res => {
        this.List2 = res.data.vos;
        this.totalInfo2 = res.data.page.totalCount;
      });
    },
    getTrafficAccidentForNetGrid() {
      api5.getTrafficAccidentForNetGrid(this.query3).then(res => {
        this.List3 = res.data.vos;
        this.totalInfo3 = res.data.page.totalCount;
      });
    },
    getWTInfo() {
      api5.getNetGridEventForNetGrid(this.query5).then(res => {
        this.List5 = res.data.vos;
        this.totalInfo5 = res.data.page.totalCount;
      });
    },
    handleCurrentChange1(val) {
      this.query1.page = val;
      this.getDisputeEventForNetGrid();
    },
    handleCurrentChange2(val) {
      this.query2.page = val;
      this.getSSEventForNetGrid();
    },
    handleCurrentChange3(val) {
      this.query3.page = val;
      this.getTrafficAccidentForNetGrid();
    },
    handleCurrentChange5(val) {
      this.query5.page = val;
      this.getWTInfo();
    },
    initCharts3(area, datas) {
      this.stackChart3 = echarts.init(document.getElementById("stackchart2"));
      this.stackChart3.setOption({
        color: ["#EE2C2C"],
        title: {
          text: new Date().getMonth() + 1 + "月份各村交通事故发生次数统计图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: area,
            axisTick: {
              alignWithLabel: true
            },
             axisLabel: {
              interval: 0,
              rotate: -30
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "交通事故",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
      this.stackChart3.on("click", ({ name }) => {
        this.current = 2;
        this.title = name + "交通事故事件信息";
        this.query3.netGridID = this.getAreaIDByName(name);
        this.getTrafficAccidentForNetGrid();
        this.visible = true;
      });
    },
    initCharts2(a, b, c) {
      this.stackChart2 = echarts.init(document.getElementById("stackchart1"));
      this.stackChart2.setOption({
        color: ["#6495ED", "#B452CD"],
        title: {
          text:
            new Date().getMonth() + 1 + "月份各区域矛盾纠纷事件处理统计统计图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: a,
            axisTick: {
              alignWithLabel: true
            },
             axisLabel: {
              interval: 0,
              rotate: -30
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "已办",
            type: "bar",
            barWidth: "30%",
            data: b
          },
          {
            name: "待办",
            type: "bar",
            barWidth: "30%",
            data: c
          }
        ]
      });

      this.stackChart2.on("click", ({ name }) => {
        this.current = 4;
        this.title = name + "矛盾纠纷事件信息";
        this.query1.netGridID = this.getAreaIDByName(name);
        this.getDisputeEventForNetGrid();
        this.visible = true;
      });
    },
    initCharts(area, common, great) {
      this.stackChart3 = echarts.init(document.getElementById("stackchart"));
      this.stackChart3.setOption({
        title: {
          text: new Date().getMonth() + 1 + "月份各村治安事件发生次数统计图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",

        },
        yAxis: {
          type: "category",
          data: area
        },
        series: [
          {
            name: "一般事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: common
          },
          {
            name: "重大事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: great
          }
        ]
      });
      this.stackChart3.on("click", ({ name }) => {
        this.current = 3;
        this.title = name + "治安事件信息";
        this.query2.netGridID = this.getAreaIDByName(name);
        this.getSSEventForNetGrid();
        this.visible = true;
      });
    },
    drawHistogram2(area, common, great) {
      this.stackChart4 = echarts.init(document.getElementById("histogram2"));
      this.stackChart4.setOption({
        title: {
          text: new Date().getMonth() + 1 + "月份各区域网格事件发生次数统计图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: area
        },
        series: [
          {
            name: "一般事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: common
          },
          {
            name: "重大事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: great
          }
        ]
      });
      this.stackChart4.on("click", ({ name }) => {
        this.current = 1;
        this.title = name + "网格事件信息";
        this.query5.netGridID = this.getAreaIDByName(name);
        this.getWTInfo();
        this.visible = true;
      });
    },
    getAreaIDByName(name) {
      return this.areaData.filter(m => {
        if (m.netGridName == name) {
          return m;
        }
      })[0].netGridID;
    },
    getSum(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    },
    init() {
      this.area2 = [];
      this.common = [];
      this.great = [];
      this.area3 = [];
      this.common1 = [];
      this.great1 = [];
      api.getNetGridEventCount().then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.area2.push(res.data[i].netGridName);
          this.common.push(res.data[i].common);
          this.great.push(res.data[i].great);
          this.drawHistogram2(this.area2, this.common, this.great);
        }
      });

      api2.getSSCountVO().then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.area3.push(res.data[i].netGridName);
          this.common1.push(res.data[i].common);
          this.great1.push(res.data[i].great);
        }
        this.initCharts(this.area3, this.common1, this.great1);
      });

      api3.getDisputeEventCount().then(res => {
        this.area4 = res.data[0];
        this.hadDone = res.data[1];
        this.needDoList = res.data[2];
        this.initCharts2(this.area4, this.hadDone, this.needDoList);
      });

      api4.getTrafficAccidentHistogramCount().then(res => {
        this.a = res.data[0];
        this.b = res.data[1];
        this.initCharts3(this.a, this.b);
      });
    }
  },
  mounted() {
    this.$store.commit("INIT_PAGE", "");
    this.init();

    this.timer = setInterval(()=>{
      this.init();
    },20000)
  },
  destroyed(){
    (this.timer!=null)&&clearInterval(this.timer);
  }
};
</script>


<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  /* border: 1px solid darkgrey; */
  padding: 5px;
  text-align: center;
  margin-bottom: 5px;
}
</style>
